<template>
	<view class="container">
		<!-- 主要内容区域 -->
		<view class="main-content" :style="{ paddingBottom: drawerHeight + 'px' }">
			<!-- 手写练习图片 -->
			<view v-show="canAct" class="image-container">
				<!-- <image src="/static/2.jpg" class="handwriting-image" mode="widthFix" @tap="previewImage" /> -->
				<!-- 第一个箭头指示 -->
				<!-- 	<view class="arrow-indicator arrow-1">
					<text class="arrow-text">📷</text>
				</view> -->
				<canvastest :list="list" @updateList="handleUpdateList" :imgurl="imgurl"></canvastest>
				<!-- <can /> -->
			</view>
		</view>

		<!-- 抽屉组件 -->

		<view class="drawer-container" :class="{ 'drawer-expanded': isDrawerExpanded }"
			:style="{ height: drawerHeight + 'px' }">
			<!-- 抽屉头部拖拽区域 -->
			<view class="drawer-header" @click="zhankaiSHouqi" @touchstart="onDrawerTouchStart"
				@touchmove="onDrawerTouchMove" @touchend="onDrawerTouchEnd">
				<view class="drag-indicator"></view>
				<!-- 第二个箭头指示 -->
				<!-- 	<view class="arrow-indicator arrow-2">
					<text class="arrow-text">⬆️</text>
				</view> -->
			</view>

			<!-- 抽屉内容区域 -->
			<scroll-view class="drawer-content" scroll-y="true" :style="{ height: (drawerHeight - 60) + 'px' }">
				<view class="content-wrapper">
					<!-- 听写结果标题 -->
					<view class="result-title">
						<text class="title-text">听写结果</text>
					</view>

					<!-- 统计信息 -->
					<view class="stats-section">
						<view class="stat-item">
							<view class="stat-icon correct-icon">
								<text class="icon-text">✓</text>
							</view>
							<text class="stat-label">正确:</text>
							<text class="stat-value">{{ objNum.statisticsInfo.correct}}</text>
						</view>

						<view class="stat-item">
							<view class="stat-icon wrong-icon">
								<text class="icon-text">✗</text>
							</view>
							<text class="stat-label">错误:</text>
							<text class="stat-value">{{ objNum.statisticsInfo.incorrect }}</text>
						</view>

						<view class="stat-item">
							<view class="stat-icon missing-icon">
								<text class="icon-text">○</text>
							</view>
							<text class="stat-label">漏写:</text>
							<text class="stat-value">{{ objNum.statisticsInfo.miss }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btns f f-a-c f-j-b">
			<view class="ban">
				{{ studentInfo.name || '未知学生' }} {{ studentInfo.class || '未知班级' }}<br>
				{{ $u.timeFormat(studentInfo.date, 'yyyy/mm/dd hh:MM') || '未知时间' }}
			</view>
			<view @click="goCorr" class="shen f f-a-c f-j-c" :class="{ 'loading': isReviewLoading }">
				{{ isReviewLoading ? '审阅中...' : '审阅' }}
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-if="isDrawerExpanded" class="drawer-mask" @tap="collapseDrawer"></view>
	</view>
</template>

<script>
	import canvastest from '@/components/canvastest.vue'
	import {
		countTypeZero
	} from '@/uits/list.js'
	export default {
		components: {
			canvastest
		},
		data() {
			return {
				list: [],
				imgurl: '',
				canAct: true,
				// 抽屉状态
				isDrawerExpanded: false,
				drawerHeight: 190, // 初始抽屉高度
				minDrawerHeight: 190,
				maxDrawerHeight: 600,
				// 触摸相关
				touchStartY: 0,
				initialDrawerHeight: 0,
				
				// 新增：审阅按钮节流控制
				isReviewLoading: false, // 审阅按钮加载状态

				// 学生数据
				results: {
					correct: 10,
					wrong: 10,
					missing: 10
				},

				studentInfo: {
					name: '小明',
					class: '3年2班',
					date: '20232423'
				},

				// 错误详情列表
				errorList: [{
						character: '技',
						description: '笔画顺序错误，应该先写提手旁'
					},
					{
						character: '巧',
						description: '字形不够工整，需要注意结构平衡'
					},
					{
						character: '昨',
						description: '日字旁写得太小，比例不协调'
					},
					{
						character: '天',
						description: '横画长度不够，影响整体美观'
					},
					{
						character: '经',
						description: '绞丝旁的写法需要改进'
					}
				],
				// 改进建议
				suggestions: [
					'加强基本笔画练习，特别是横、竖、撇、捺的书写',
					'注意字体结构的平衡，左右结构字要注意比例',
					'提高书写速度的同时保持字迹工整',
					'多练习常用偏旁部首的标准写法'
				],
				item: {},
				objNum: {}
			}
		},
		watch: {
			isDrawerExpanded(newl, oldl) {
				if (newl) {
					this.canAct = false
				} else {
					setTimeout(() => {

						this.canAct = true
					}, 300)

				}
			}
		},
		onLoad(e) {
			console.log('页面onLoad参数:', e)

			// 获取传入的图片地址
			this.item = JSON.parse(decodeURIComponent(e.item));
			let obj = JSON.parse(this.item.attachs)
			this.objNum = obj
			this.imgurl = decodeURIComponent(e.image);

			this.list = JSON.parse(this.item.aiCorrectResult) //list数据
			
			// 动态获取学生信息
			this.initializeStudentInfo();
		},
		methods: {
			handleUpdateList(cleanedList) {
				console.log(cleanedList, '20202020202022020022020');
				this.item.aiCorrectResult = JSON.stringify(cleanedList)
				let num = countTypeZero(list)
				objNum.statisticsInfo.incorrect = num
				// this.list = updatedList
			},
			// goCorr去默写批改报告
			async goCorr() {
				// 节流控制：如果正在加载中，直接返回
				if (this.isReviewLoading) {
					uni.showToast({
						title: '请勿重复点击',
						icon: 'none',
						duration: 1500
					});
					return;
				}

				// 设置加载状态
				this.isReviewLoading = true;

				try {
					let list = JSON.parse(this.item.aiCorrectResult)
					let obj = JSON.parse(this.item.attachs)
					this.objNum = obj
					let num = countTypeZero(list)
					obj.statisticsInfo.incorrect = num
					let n = await this.$api.resultReview({
						...this.item,
						reviewStatus: 1,
						attachs: JSON.stringify(obj)
					})
					
					if (n.code == '0000') {
						this.$msg('审阅成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						// 如果接口失败，立即恢复按钮状态
						this.isReviewLoading = false;
						this.$msg(n.info || '审阅失败');
					}
				} catch (error) {
					console.error('审阅请求失败:', error);
					// 异常情况下也要恢复按钮状态
					this.isReviewLoading = false;
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'error'
					});
				}

				// 3秒后恢复按钮状态（成功情况下的兜底处理）
				setTimeout(() => {
					this.isReviewLoading = false;
				}, 3000);
			},
			// 预览手写图片
			previewImage() {
				uni.previewImage({
					urls: ['/static/handwriting-practice.jpg'],
					current: 0
				});
			},

			// 抽屉触摸开始
			onDrawerTouchStart(e) {
				this.touchStartY = e.touches[0].clientY;
				this.initialDrawerHeight = this.drawerHeight;
			},

			// 抽屉触摸移动
			onDrawerTouchMove(e) {
				const currentY = e.touches[0].clientY;
				const deltaY = this.touchStartY - currentY;
				const newHeight = this.initialDrawerHeight + deltaY;

				// 限制抽屉高度范围
				if (newHeight >= this.minDrawerHeight && newHeight <= this.maxDrawerHeight) {
					this.drawerHeight = newHeight;
				}
			},

			// 抽屉触摸结束
			onDrawerTouchEnd(e) {
				// 根据最终高度决定是展开还是收起
				if (this.drawerHeight > (this.minDrawerHeight + this.maxDrawerHeight) / 2) {
					this.expandDrawer();
				} else {
					this.collapseDrawer();
				}
			},

			// 展开抽屉
			expandDrawer() {
				this.isDrawerExpanded = true;
				this.drawerHeight = this.maxDrawerHeight;
			},

			// 收起抽屉
			collapseDrawer() {
				this.isDrawerExpanded = false;
				this.drawerHeight = this.minDrawerHeight;
			},
			zhankaiSHouqi() {
				// 点击展开和收起
				if (!this.isDrawerExpanded) {
					this.expandDrawer()
				} else {
					this.collapseDrawer()

				}
			},
			// 动态初始化学生信息
			initializeStudentInfo() {
				try {
					// 从item中获取学生信息
					if (this.item) {
						this.studentInfo = {
							name: this.item.studentName || this.item.name || '未知学生',
							class: this.item.className || this.item.class || '未知班级',
							date: this.item.createTime || this.item.submitTime || this.item.date || new Date()
						};
						console.log('初始化学生信息:', this.studentInfo);
					}
				} catch (error) {
					console.error('初始化学生信息失败:', error);
					// 使用默认值
					this.studentInfo = {
						name: '未知学生',
						class: '未知班级', 
						date: new Date()
					};
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		position: fixed;
		height: 180rpx;
		bottom: 0;
		left: 0;
		z-index: 100000;
		background-color: #fff;
		width: 100%;
		padding: 10rpx 30rpx 30rpx;

		.ban {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
		}

		.shen {
			width: 70%;
			height: 96rpx;
			background: #05C490;
			border-radius: 30rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			transition: all 0.3s ease;
			
			&.loading {
				background: #cccccc;
				opacity: 0.6;
				pointer-events: none; // 禁用点击事件
			}
		}
	}

	.container {
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;
		overflow: hidden;
	}

	.main-content {
		height: 100%;
		transition: padding-bottom 0.3s ease;
	}

	.image-container {
		// padding: 20rpx;
		position: relative;
	}

	.handwriting-image {
		width: 100%;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.arrow-indicator {
		position: absolute;
		background-color: rgba(255, 0, 0, 0.8);
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		animation: pulse 2s infinite;
	}

	.arrow-1 {
		top: 50rpx;
		right: 50rpx;
	}

	.arrow-2 {
		top: -30rpx;
		right: 30rpx;
	}

	.arrow-text {
		font-size: 24rpx;
		color: white;
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.1);
			opacity: 0.7;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.drawer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		border-radius: 40rpx 40rpx 0 0;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: height 0.3s ease;
		z-index: 1000;
	}

	.drawer-header {
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		cursor: grab;
	}

	.drag-indicator {
		width: 60rpx;
		height: 6rpx;
		background-color: #ddd;
		border-radius: 3rpx;
	}

	.drawer-content {
		// background-color: #f8fffe;
		border-radius: 0 0 20rpx 20rpx;
	}

	.content-wrapper {
		padding: 0 30rpx 120rpx;
	}

	.result-title {
		// text-align: left;
		margin-bottom: 30rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.stats-section {
		margin-bottom: 30rpx;
		background: linear-gradient(90deg, #CFFFE9 0%, #E7FAFF 100%);
		padding: 20rpx;
		border-radius: 50rpx 50rpx 0 0;
	}

	.stat-item {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		padding: 15rpx;
		// background-color: white;
		border-radius: 12rpx;
	}

	.stat-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
	}

	.correct-icon {
		background-color: #28a745;
	}

	.wrong-icon {
		background-color: #dc3545;
	}

	.missing-icon {
		background-color: #ffc107;
	}

	.icon-text {
		color: white;
		font-size: 20rpx;
		font-weight: bold;
	}

	.stat-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.student-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.student-details {
		display: flex;
		align-items: center;
	}

	.student-name {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-right: 15rpx;
	}

	.student-class {
		font-size: 24rpx;
		color: #8e44ad;
		background-color: #f8f9fa;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

	.date-info {
		font-size: 24rpx;
		color: #666;
	}

	.error-details,
	.suggestions {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.error-item {
		display: flex;
		align-items: center;
		padding: 15rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
	}

	.error-char {
		width: 60rpx;
		height: 60rpx;
		background-color: #ff4757;
		color: white;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 15rpx;
	}

	.error-desc {
		flex: 1;
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.suggestion-item {
		padding: 15rpx;
		background-color: white;
		border-radius: 12rpx;
		margin-bottom: 10rpx;
		border-left: 4rpx solid #007bff;
	}

	.suggestion-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	.action-section {
		margin-top: 40rpx;
	}

	.review-btn {
		width: 100%;
		height: 80rpx;
		background-color: #28a745;
		color: white;
		border: none;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
	}

	.review-btn::after {
		border: none;
	}

	.drawer-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
	}

	.drawer-expanded {
		z-index: 1001;
	}
</style>